<template>
  <div class="wl-page wl-flexview">
    <div class="wl-scrollview">
      <router-view></router-view>
    </div>
    <van-tabbar v-if="$store.state.user.severUserInfo.userType == '1' && $route.meta.TabbarShow == true" v-model="active" class="wl-tabbar" :fixed="false" @change="tabChange">
      <van-tabbar-item icon="home-o" to="/home" :replace="true">首页</van-tabbar-item>
      <van-tabbar-item icon="balance-list-o" to="/order" :replace="true">订单</van-tabbar-item>
      <van-tabbar-item to="/productEdit?give_service_type=预约" :replace="true">
        <div class="page-add-btn">+</div>
      </van-tabbar-item>
      <van-tabbar-item :dot="$store.state.app.msgState" icon="comment-o" to="/msg" :replace="true">消息</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/mine" :replace="true">我的</van-tabbar-item>
    </van-tabbar>
    <van-tabbar v-if="$store.state.user.severUserInfo.userType == '2'&& $route.meta.TabbarShow == true" v-model="active" class="wl-tabbar" :fixed="false" @change="tabChange">
      <van-tabbar-item icon="home-o" to="/home-waiter" :replace="true">首页</van-tabbar-item>
      <van-tabbar-item icon="balance-list-o" to="/task-waiter" :replace="true">任务</van-tabbar-item>
      <van-tabbar-item icon="comment-o" to="/order-waiter" :replace="true">订单</van-tabbar-item>
      <van-tabbar-item :dot="$store.state.app.msgState" icon="user-o" to="/mine-waiter" :replace="true">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
// import { mLogin } from '@/api/user'
// import { getUrlForNologin } from '@/api/iteminfo'
import { selectIsReadeList } from '@/api/medical.js'
import {
  mapActions
} from 'vuex'

export default {
  data () {
    return {
      active: 0,
      userBg: false,
      overlayShow: false,
      type: false
    }
  },
  mounted () {
    this.isNavBarShowIndexAction(this.$route.path)
    console.log(this.$route.meta)
  },
  computed: {
    menuState () {
      return this.active
    }
  },
  methods: {
    ...mapActions([
      'setNavIndex',
      'setMsgState'
    ]),
    getMsg () {
      if (!this.$store.state.user.severUserInfo || !this.$store.state.user.token) {
        return false
      }
      let param = {
        userType: this.$store.state.user.severUserInfo.userType == '1' ? '2' : '3'
      }
      param[this.$store.state.user.severUserInfo.userType == '1' ? 'member_id' : 'accompanying_physician_id'] = this.$store.state.user.token
      // 查询是否有系统消息
      selectIsReadeList({
        ...param,
        userType: '1',
        is_accompanying_read: '1'
      }).then(res => {
        if (res.data.errcode === 0) {
          // 会员||陪诊师 新消息查询
          selectIsReadeList(param).then(ret => {
            if (ret.data.errcode === 0) {
              this.setMsgState(ret.data.data.length > 0 || (res.data.data[0] && res.data.data[0].isRead > 0))
            }
          })
        }
      })
    },
    tabChange (index) {
      this.setNavIndex(index)
    },
    isNavBarShowIndexAction (path) {
      let navBarList = []
      if (this.$store.state.user.severUserInfo.userType == '1') {
        navBarList = [
          ['/home', '/search', '/searchList', '/hospitalDetail', '/waiterDetail', '/organDetail', '/productList', '/productDetail', '/city', '/productEdit'],
          ['/order', 'orderDetail'],
          ['/addItem'],
          ['/msg', '/msgDetail'],
          ['/mine', '/patientList', '/patientEdit', '/addressList', '/addressEdit', '/setting', '/userInfo']
        ]
      } else {
        navBarList = [
          ['/home-waiter'],
          ['/task-waiter'],
          ['/order-waiter'],
          ['/mine-waiter', '/mineMsg', '/mineMsgDetail']
        ]
      }
      navBarList.forEach((item, index) => {
        if (this.$common.xeUtils.includes(item, path)) {
          this.active = index
          this.setNavIndex(index)
        }
      })
    }
  },
  watch: {
    $route (to) {
      console.log(this.$store.state.user.severUserInfo.userType, this.$route.meta.TabbarShow, '4444')
      this.isNavBarShowIndexAction(to.path)
      this.getMsg()
    }
  }
}
</script>
<style>
  @import '../assets/common.css';
  @import '../assets/icons/iconfont.css';

  .wl-page {
    height: 100%;
  }

  .van-hairline--top::after {
    border-color: #d2d2d2 !important;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block-container {
    width: 70%;
  }

  .block-container-inner {
    height: 100%;
    text-align: center;
    border-radius: 5px;
    border: 5px solid rgba(68, 110, 143, 0.62);
    margin: 5px;
    background-color: rgba(68, 110, 143, 0.62);
  }

  .block-container-top {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-image: linear-gradient(#82c1f1,
        #73b6e9,
        #5ba1d9,
        #478dc9,
        #3b80bf);
    height: 150px;
    padding: 20px 10px;
    color: white;
  }

  .block-container-top p {
    font-size: 20px;
    font-weight: 500;
    margin: 10px;
  }

  .block-container-top p:first-child {
    font-size: 22px;
  }

  .block-container-bottom {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 5px;
    font-size: 20px;
    color: #186cb0;
    cursor: pointer;
    background-color: white;
  }

  .block-container-bottom p {
    margin: 0px;
    padding: 10px;
  }

  .connect-line {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
    /*height: 30px;*/
    /*border: 2px solid white;*/
    /*width: 0px;*/
  }

  .connect-line div {
    height: 50px;
    border: 1px solid white;
    width: 0px;
  }

  .close-container {
    /*margin-top: 20px;*/
    text-align: center;
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .close-inner {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    border: 2px solid white;
    padding: 5px;
    cursor: pointer;
  }
  .page-add-btn{
    width: 40px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background-color: #1989fa;
    color: #FFFFFF;
    border-radius: 5px;
  }
</style>
